<template>
 <el-form :model="ruleForm" @keyup.enter.native="submitForm('ruleForm')" ref="ruleForm" v-loading.fullscreen.lock="loading" element-loading-body="true" label-width="0" class="demo-ruleForm">
  <el-form-item prop="phone">
   <el-input v-model="ruleForm.phone" :placeholder="$t('common.tips.t1')"></el-input>
  </el-form-item>
  <el-form-item prop="password">
   <el-input v-model="ruleForm.password" maxlength="18" type="password" :placeholder="$t('common.tips.t2')"></el-input>
  </el-form-item>
  <el-form-item class="btn">
   <el-button type="primary" @click="submitForm('ruleForm')">{{ $t('common.user.login') }}</el-button>
  </el-form-item>

  <el-form-item>
   <router-link :to="{path: '/reset'}">{{ $t('login.forget') }}</router-link>

   <p>No Account yet?<router-link :to="{path: '/Register'}">{{ $t('login.register') }}</router-link></p>
  </el-form-item>
 </el-form>
</template>

<script>
export default {
 name: "Email",
 data() {
  return {
   ruleForm: {
    phone: '',
    password: ''
   },

   loading: false,

   isEmail: /^[\w\-\.]+@[a-z0-9]+(\-[a-z0-9]+)?(\.[a-z0-9]+(\-[a-z0-9]+)?)*\.[a-z]{2,4}$/i
  }
 },
 methods: {
  // 提交
  submitForm(e) {
   if (this.isEmail.test(this.ruleForm.phone) && 6 < this.ruleForm.password.length && this.ruleForm.password.length < 18) {
    this.loading = true;
    this.$login({
     data: this.ruleForm
    }).then(res => {
     if (res.code !== 1) {
      this.loading = false
     } else {
      this.$store.commit('setToken', res.data);
      this.$get(this.$address.userInfo, {})
       .then(res => {
        if (res.code !== 1) {
         this.loading = false
        } else {
         this.$message.success(this.$t('common.success.t1'))
         this.$store.commit('setInfo', res.data);
         this.$router.push({
          path: '/Dashboard'
         })
        }
       })
     }
    })
   } else {
    if (this.ruleForm.phone === '') {
     this.$message.error(this.$t('common.error.t1'))
    } else {
     if (!this.isEmail.test(this.ruleForm.phone)) {
      this.$message.error(this.$t('common.error.t2'))
     } else {
      if (this.ruleForm.password === '') {
       this.$message.error(this.$t('common.error.t3'))
      } else {
       if (this.ruleForm.password.length < 6 || this.ruleForm.password.length > 18) {
        this.$message.error(this.$t('common.error.t4'))
       }
      }
     }
    }
   }
  },
 }
}
</script>

<style scoped lang="scss">
.el-form {
 margin-top: 80px;
 >.el-form-item {
  background-color: #f5faff;
  margin-bottom: 40px;
  padding: 0 20px;

  &:nth-of-type(2) {
   margin-bottom: 0;
  }

  /deep/ .el-form-item__content {
   display: flex;
   align-items: center;
  }

  /deep/ .el-input__inner{
   background-color: transparent;
   border: none;
   height: 63px;
   border-radius: 5px;
   font-weight: bold;
   color: #002445;
   font-size: 18px;

   &[type=password] {
    letter-spacing: 2px;
    &::-webkit-input-placeholder {
     letter-spacing: 0;
    }
   }
  }

  &.btn {
   padding: 0;
   background-color: transparent;

   .el-button {
    width: 100%;
    margin-top: 60px;
    border-radius: 8px;
    background-color: #0d4fa5;
    height: 60px;
    line-height: 60px;
    color: #fff;
    padding: 0 30px;
    font-size: 18px;
   }
  }

  &:last-of-type {
   padding: 0;
   background-color: transparent;
   margin-bottom: 0;

   /deep/ .el-form-item__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;

    >a {
     margin-right: auto;
     color: #000;
    }
    >p {
     font-size: 16px;

     a {
      text-decoration: underline;
      color: #0d4fa5;
      margin-left: 5px;
     }
    }
   }
  }
 }
}
</style>
